<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="text" id="d1">
<input type="text" id="d2">
<br>
<input type="button" value="加" onclick="fn(1)">
<input type="button" value="减" onclick="fn(2)">
<input type="button" value="乘" onclick="fn(3)">
<input type="button" value="除" onclick="fn(4)">
<div id="result">结果:0</div>
<script>
    function fn(x) {
        //大部分浏览器会自动添加下面的代码
        // let d1 = document.getElementById('d1')
        // let d2 = document.getElementById('d2')
        // let result = document.getElementById('result')
        switch (x) {
            case 1:
                result.innerText = "结果:" + (d1.value * 1 + d2.value * 1)
                break;
            case 2:
                result.innerText = "结果:" + (d1.value  - d2.value)
                break;
            case 3:
                result.innerText = "结果:" + (d1.value  * d2.value )
                break;
            case 4:
                result.innerText = "结果:" + (d1.value / d2.value)
                break;
        }
    }
</script>
</body>
</html>